Añadiendo una imagen en la caja de contenido

Hace unos días me preguntaban por la forma de mostrar los códigos en algunos ejemplos, propuse una entrada explicándolo y aquí la tenemos.

Lo primero de todo es crear la caja de contenido personalizada al estar explicado con anterioridad podemos seguir esos pasos y continuamos con lo siguiente que tratará de añadir esas imágenes que vemos en la parte superior izquierda de la caja. Los ejemplos los podéis ver en esta misma entrada son esas imágenes de fondo rojo y texto blanco que nos indican la clase de código que vamos a copiar si es CSS o HTML.

En plantilla edición de html añadimos los estilos para ubicar esas imágenes, supongamos que deseo añadir una imagen que la vamos a mostrar cuando añadimos CSS añadimos entonces una clase a esa imagen que la llamaremos "css"

pre.css {

background:transparent url(url-imagen) no-repeat scroll left top;

}

Donde url-imagen lo sustituimos por la url de nuestra imagen, guardamos los cambios y en la entrada que deseamos mostrar la caja de contenido con imagen añadimos unas líneas de html con la misma clase que se asocia a esa imagen que sería lo siguiente:

<pre class="css">Contenido de la caja

</pre>

Con eso, veremos la imagen en la parte superior izquierda de nuestro contenido:

Contenido de la caja

Pero, si seguimos los pasos del enlace para personalizar la caja de contenido también tendremos que añadir <code> al principio de nuestro contenido y </code> al final, de forma que nos quedaría más o menos así:

<pre class="css"><code>Contenido de la caja
</code></pre>

¿Se puede hacer con cualquier otra imagen y contenido? puede hacerse, simplemente sustituyendo la url de la imagen y el contenido, sólo hay que entender que el nombre de la clase que añadimos asociado a esa imagen debe coincidir con el que añadimos en html para mostrar la caja de contenido.

Un último detalle, si te gustan las imágenes que se han usado en esta entrada eres libre de llevártelas pero por favor utiliza tu propia url alojándolas en tu álbum de Picasa o cualquier otro sitio.